<template>
	<div class="login">
     <div class="container">	  
	    <div class="form-box" :style="formBoxStyle">
	      <el-form v-show="isRegister" class="register-box" :model="registerForm" :rules="registerRules" status-icon ref="formregister">
	        <h1>用户注册</h1>
	        <el-form-item prop="phone">
	          <el-input v-model="registerForm.phone" name="phone" placeholder="手机号" />
	        </el-form-item>
	        <el-form-item prop="password">
	          <el-input class="input-style" type="password" v-model="registerForm.password" name="password" placeholder="密码" />
	        </el-form-item>
	        <el-form-item prop="confirmPwd">
	          <el-input class="input-style" type="password" v-model="registerForm.confirmPwd" name="confirmPwd" placeholder="确认密码" />
	        </el-form-item>
	        <el-button type="primary" @click="register()">注册</el-button>
	      </el-form>
	      <el-form v-show="!isRegister" class="login-box" :model="loginForm" :rules="loginRules" status-icon ref="formlogin">
	        <h1>用户登录</h1>
	        <el-form-item  prop="phone">
	          <el-input class="input-style" v-model="loginForm.phoneoremail" name="phoneoremail" placeholder="手机号/邮箱" />
	        </el-form-item>
	        <el-form-item  prop="password">
	          <el-input class="input-style" type="password" v-model="loginForm.password" name="password" placeholder="密码" />
	        </el-form-item>
	        <el-button type="primary" @click="login()">登录</el-button>
	        <el-link style="margin: 18px;">忘记密码</el-link>
	      </el-form>
	    </div>
	  
      <div v-show="isRegister" class="con-box left" >
        <p>已有账号!</p>
        <button id="login" @click="goLogin()">去登录</button>
      </div>
      <div v-show="!isRegister" class="con-box right" >
        <p>没有账号？</p>
        <button id="register" @click="goRegister()">去注册</button>
      </div>
    </div>		
</div>

</template>

<script setup>
import router from '@/router';
import { post,get} from '@/plugins/axios';
import { ElForm, ElMessage } from 'element-plus';
import {ref,reactive} from 'vue'
import VueCookie from 'vue-cookie';
import $ from 'jquery';
import module from 'module';
const isRegister = ref(false); // 控制显示登录还是注册
const formBoxStyle = ref({ transform: 'translateX(0%)' }); // 控制表单盒子的X轴偏移
const formlogin = ref()
const formregister = ref()
const registerForm = ref({
  phone: '',
  password: '',
  confirmPwd: '',
  role: '2'
});
const loginForm = ref({
  phone: '',
  password: ''
});
const loginRules = {
  phoneoremail: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3456789]\d{9}$/, message: '手机号格式错误', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 5, message: '密码长度不能小于5位', trigger: 'blur' }
  ]
};
const registerRules = {
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3456789]\d{9}$/, message: '手机号格式错误', trigger: 'blur' },
    { validator: check,trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 5, message: '密码长度不能小于5位', trigger: 'blur' }
  ],
  confirmPwd: [
    { required: true, message: '请再次输入密码', trigger: 'blur' },
    { validator: validateConfirmPwd, trigger: 'blur' }
  ]
};
function check(rule,value,callback){
	get("/tUser/check",{id:null,value,field:rule.field},res=>{
    console.log(res)
		if(res){
			callback();
		}
		else{
			callback(new Error('手机号已占用'));
		}
	})
}
function validateConfirmPwd(rule, value, callback) {
  if (value !== registerForm.value.password) {
    callback(new Error('两次输入的密码不一致'));
  } else {
    callback();
  }
}
function goRegister() {
	isRegister.value = true;
	formBoxStyle.value.transform = 'translateX(80%)'; // 负值表示向左滑动
  formlogin.value.resetFields();
}

function goLogin() {
  isRegister.value = false;
  formBoxStyle.value.transform = 'translateX(0%)';
  formregister.value.resetFields();
}


function login() {
  console.log('cliked login');
  $.getJSON('src/login.json', (data) => {
        let found = false;
        data.forEach(item => {
          if (item.phone === this.loginForm.phoneoremail && item.password === this.loginForm.password) {
            found = true;
            console.log('登录成功');
            VueCookie.set('token', item.token); // 假设item中有token字段
            router.push({ name: 'Indexmain' }).catch(err => {
              console.error('路由跳转失败:', err);
              });
            ElMessage.success('登录成功');
          }
        });
        if (!found) {
          console.log('登录失败，手机号或密码错误');
          ElMessage.error('用户不存在或密码错误');
        }
      }).fail(() => {
        console.log('请求login.json失败');
        ElMessage.error('网络错误或文件无法加载');
      });
    
}

function login1() {
  try {
    post("/tUser/login",loginForm.value, content => {
		if (content) {
		VueCookie.set('token', content)
      router.push({ name:"Indexmain" })
			callback()
		} else {
			callback(new Error('用户不存在'))
		}
	},formlogin)
  } catch (error) {
  }
}

function register() {
  try {
    post("/tUser/register", registerForm.value, content => {
		if (content) {
   
			goLogin()
			ElMessage.success('注册成功')
			callback()
		} else {
			callback(new Error())
		}
	},formregister)
  } catch (error) {
  }
}
</script>

<style lang="scss" scoped>
	.login{
		background-color: #f5f5f5;
		height: 100vh;
		display: flex;
	}
  .container {
    background-color: #fff;
    width: 650px;
    height: 415px;
    border-radius: 5px;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
    position: relative;
    margin: auto;
  }

  .form-box {
    position: absolute;
    top: -10%;
    left: 5%;
    background-color: #9797d8;
    width: 320px;
    height: 500px;
    border-radius: 5px;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    transition: 0.5s ease-in-out;
  }

  .register-box,
  .login-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }
  h1 {
    text-align: center;
    margin-bottom: 55px;
    color: #fff;
    letter-spacing: 5px;
  }

  .el-input {
    --el-input-bg-color: transparent;
    --el-input-border-color: transparent;
    --el-input-focus-border-color: #5855ad;
    --el-input-hover-border-color: #5855ad;
    width: 90%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    padding: 10px 0;
    text-indent: 10px;
    margin: 8px 0;
    font-size: 14px;
    letter-spacing: 2px;
  }
  .form-box button {
    width: 70%;
    margin-top: 35px;
    background-color: #f6f6f6;
    outline: none;
    border-radius: 8px;
    padding: 13px;
    color: #5855ad;
    letter-spacing: 2px;
    border: none;
    cursor: pointer;
  }

  .form-box button:hover {
    background-color: #6464ad;
    color: #f6f6f6;
    transition: background-color 0.5s ease;
  }

  .con-box {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  .con-box.left {
    left: -2%;
  }
  .con-box.right {
    right: -2%;
  }

  .con-box h2 {
    color: #8e9aaf;
    font-size: 25px;
    font-weight: bold;
    letter-spacing: 3px;
    text-align: center;
    margin-bottom: 4px;
  }

  .con-box p {
    font-size: 12px;
    letter-spacing: 2px;
    color: #8e9aaf;
    text-align: center;
  }

  .con-box span {
    color: #d3b7d8;
  }

  .con-box button {
    margin-top: 3%;
    background-color: #fff;
    color: #5253ad;
    border: 1px solid #7a80d8;
    padding: 6px 10px;
    border-radius: 5px;
    letter-spacing: 1px;
    outline: none;
    cursor: pointer;
  }

  .con-box button:hover {
    background-color: #6464ad;
    color: #fff;
  }
</style>